<template>
  <el-form :model="form" label-width="80px">
    <!-- 城市选框 -->
    <el-form-item label="城市：">
      <el-select v-model="form.city" placeholder="请选择城市" style="width: 500px;">
        <el-option label="北京" value="beijing"></el-option>
        <el-option label="上海" value="shanghai"></el-option>
      </el-select>
    </el-form-item>
    <!-- 城市区域选框 -->
    <el-form-item v-if="form.city === 'beijing'" label="区域：">
      <el-checkbox-group v-model="form.area">
        <el-checkbox v-for="area in areas" :key="area.value" :label="area.label" :value="area.value">{{ area.label }}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <!-- 价格选框 -->
    <el-form-item label="价格范围:">
      <el-select v-model="form.price" placeholder="请选择价格范围" style="width: 500px;">
        <el-option label="不限" value=""></el-option>
        <el-option label="1000元以下" value="0-1000"></el-option>
        <el-option label="1000-2000元" value="1000-2000"></el-option>
        <el-option label="2000-3000元" value="2000-3000"></el-option>
      </el-select>
    </el-form-item>
    <!-- 房型选框 -->
    <el-form-item label="房型：">
      <el-checkbox-group v-model="form.types">
        <el-checkbox label="1室"></el-checkbox>
        <el-checkbox label="2室"></el-checkbox>
        <el-checkbox label="3室"></el-checkbox>

      </el-checkbox-group>
    </el-form-item>

    <!-- 租期选框 -->
    <el-form-item label="租期：">
      <el-checkbox-group v-model="form.lease">
        <el-checkbox label="月租"></el-checkbox>
        <el-checkbox label="年租"></el-checkbox>
        <el-checkbox label="一个月起租"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <!-- 朝向选框 -->
    <el-form-item label="朝向：">
      <el-checkbox-group v-model="form.orientation">
        <el-checkbox label="朝南"></el-checkbox>
        <el-checkbox label="朝北"></el-checkbox>
        <el-checkbox label="朝西"></el-checkbox>
        <el-checkbox label="朝东"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-button type="primary" @click="submitForm" style="margin-bottom: 10px">搜索</el-button>
  </el-form>

  <div style="width: 1000px;margin: 0 auto">
    <el-row gutter="20" v-for="house in houses" :key="house.id">
      <el-col :span="24">
        <el-card>
          <div class="card-content">
            <!-- 左侧内容 -->
            <div class="left-content">
              <!-- 房屋图片 -->
              <div class="house-image">
                <img src="/background12.jpg" style="height: 150px;width: 400px;">
              </div>
            </div>
            <!-- 右侧内容 -->
            <div class="right-content">
              <!-- 房屋标题 -->
              <div class="title">{{ house.title }}</div>
              <!-- 房屋信息 -->
              <div class="info">
                <p>城市：{{ house.city }}</p>
                <p>价格：{{ house.price }}</p>
                <p>房型：{{ house.type }}</p>
                <p>朝向：{{ house.orientation }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {ElMessage} from "element-plus";

const form = ref({
  city: '',
  area: [],
  price: '',
  types: [],
  lease:[],
  orientation: []
});

const areas = [
  { label: '东城', value: 'dongcheng' },
  { label: '西城', value: 'xicheng' },
  { label: '朝阳', value: 'chaoyang' },
  { label: '海淀', value: 'haidian' },
  { label: '丰台', value: 'fengtai' },
  { label: '石景山', value: 'shijingshan' },
  { label: '通州', value: 'tongzhou' },
  { label: '昌平', value: 'changping' },
  { label: '大兴', value: 'daxing' },
  { label: '亦庄开发区', value: 'yizhuangkaifaqu' },
  { label: '顺义', value: 'shunyi' },
  { label: '房山', value: 'fangshan' },
  { label: '门头沟', value: 'mentougou' },
  { label: '平谷', value: 'pinggu' },
  { label: '怀柔', value: 'huairou' },
  { label: '密云', value: 'miyun' },
  { label: '延庆', value: 'yanqing' }
];

const submitForm = () => {
  // 在这里实现根据选择的筛选条件来更新房源列表的逻辑
  console.log('城市：', form.value.city);
  console.log('区域：', form.value.area);
  console.log('价格范围：', form.value.price);
  console.log('房型：', form.value.types);
  console.log('朝向：', form.value.orientation);
};
const houses = ref([
  {
    id: 1,
    title: '整租·长安小区 三室一厅  南/北',
    city: '****',
    price: '****',
    type: '****',
    orientation: '****'
  },
  {
    id: 2,
    title: '****',
    city: '****',
    price: '****',
    type: '****',
    orientation: '****'
  },
  // 可以添加更多的房源数据
]);


</script>

<style scoped>
.card-content {
  display: flex;
}

.left-content {
  flex: 1;
  padding: 20px;
}

.right-content {
  flex: 1;
  padding: 20px;
}

.house-image {
  height: 150px;
  width: 400px;
  background-color: #f0f0f0;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.info {
  margin-top: 10px;
}
</style>
